<template>
    <div class="common-table">
        <el-table :data="tableData" stripe>
            <el-table-column prop="name" label="姓名" width="200"></el-table-column>
            <el-table-column prop="age" label="年龄" width="200"></el-table-column>
            <el-table-column prop="sexLabel" label="性别" width="200"></el-table-column>
            <el-table-column prop="birth" label="出生日期" width="300"></el-table-column>
            <el-table-column prop="addr" label="地址" width="400"></el-table-column>
            <el-table-column label="操作" min-width="180">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)"  size="mini">编辑</el-button>
                    <el-button  size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <el-pagination class="pager" layout="prev.pager,next" :total="config.total" :current-page.sync="config.page"
            @current-change="changePage" :page-size=20>
        </el-pagination> -->
        <el-pagination background layout="prev, pager, next" :total="50">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'CommonTable',
    props: {
        // config: Object,
        tableData: Array
    },
    data() {
        return {
        }
    },
    methods: {
        handleEdit(row) {
            this.$emit('edit', row)
            console.log(row);
        },
        handleDelete(row) {
            this.$emit('del', row)
        },
        changePage() {
            // this.$emit('changePage', page)
        }
    }
}
</script>

<style scoped lang="scss">
.common-table {
    height: calc(100% - 62px);
    background-color: #fff;
    position: relative;

    .pager {
        position: absolute;
        bottom: 0;
        right: 20px;
    }
}
</style>